<template>
  <div class="my-tag">
    <input
      v-if="isEdit"
      @blur="change"
      @keyup.enter="change"
      ref="txt"
      v-model="tagName"
      class="input"
      type="text"
      placeholder="输入标签"
    />

    <!-- 双击事件：dblclick -->
    <div v-else @dblclick="doEdit" class="text">{{ value }}</div>
  </div>
</template>

<script>
export default {
  name: "MyTag",
  // 子要
  props: {
    value: {
      // 限制类型是字符串
      type: String,
      // 如果不传默认值显示暂无
      default: "暂无",
    },
  },
  data() {
    return {
      isEdit: false,
      tagName: "",
    };
  },
  methods: {
    async doEdit() {
      // 1. 显示出输入框,dom更新是异步的，所以input在这里的时候还没与渲染出来
      this.isEdit = true;
      // 2. 给输入框赋值为当前要显示的文字
      this.tagName = this.value;
      // 3. 让输入框自动获得焦点
      //   this.$nextTick( () => {
      //       // 会在下次dom更新后调用
      //       this.$refs.txt.focus()
      //   } )

      // $nextTick使用await的形式
      await this.$nextTick(); // 他会等下次dom更新完毕
      // 等完后执行后面的代码
      // 也就是说能来到这的时候，dom已经更新了
      this.$refs.txt.focus();
    },

    // 当输入框失去焦点调用
    change() {
      // 1. 隐藏输入框
      this.isEdit = false;

      // 2. 修改当前数据的标签的内容
      this.$emit("input", this.tagName);
    },
  },
};
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>